import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Table, Divider, Button } from 'antd';
import Link from 'umi/link';
import router from 'umi/router';
import moment from 'moment';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import downloadFile from '@/utils/utils';

const { Description } = DescriptionList;

@connect(({ protocol: { detail }, loading }) => ({
  detail,
  loading: loading.effects['protocol/fetchDetail'],
  suppProtId: '',
}))
class BasicProfile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      suppProtId: '',
    };
  }

  componentDidMount() {
    const {
      dispatch,
      location: { query },
    } = this.props;
    const { suppProtId } = query;
    dispatch({
      type: 'protocol/fetchDetail',
      payload: { suppProtId },
    });
    this.setState({ suppProtId });
  }

  render() {
    const { detail, loading } = this.props;
    const { suppProtId } = this.state;
    const { packList = [], affixList = [] } = detail;
    let packListData = [];
    if (packList.length) {
      let price = 0;
      packList.forEach(item => {
        price += Number(item.price);
      });
      packListData = packList.concat({
        pdId: 'sum',
        pdNameList: '总计',
        price,
      });
    }
    const columns = [
      {
        title: '产品',
        dataIndex: 'pdNameList',
        key: 'pdNameList',
        render: (text, row, index) => {
          if (index < packList.length) {
            return <span>{text}</span>;
          }
          return {
            children: <span style={{ fontWeight: 600 }}>总计</span>,
            props: {
              colSpan: 1,
            },
          };
        },
      },
      {
        title: '价格(元)',
        dataIndex: 'price',
        key: 'price',
        align: 'right',
        render: (text, row, index) => {
          if (index < packList.length) {
            return <span style={{ fontWeight: 600 }}>{text.toFixed(2)}</span>;
          }
          return <span style={{ fontWeight: 600 }}>{text.toFixed(2)}</span>;
        },
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card title="协议详情">
          <div style={{ position: 'absolute', right: 32, top: 18 }}>
            <Link to={`/supplymanage/protocol/history?suppProtId=${suppProtId}`}>操作历史</Link>
          </div>
          <DescriptionList size="large">
            <Description term="协议名称">{detail.suppProtName}</Description>
            <Description term="客户名称">{detail.custName}</Description>
            <Description term="供应商">{detail.recvSuppName}</Description>
            <Description term="执行地区">{detail.areaNameList}</Description>
            <Description term="创建时间">
              {detail.creTime ? moment(detail.creTime).format('YYYY-MM-DD HH:mm') : null}
            </Description>
            <Description term="创建人">{detail.creName}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 24 }} />
          <Table
            style={{ marginBottom: 24, width: 400 }}
            pagination={false}
            loading={loading}
            dataSource={packListData}
            columns={columns}
            rowKey="pdId"
          />
          {affixList.length ? (
            <div style={{ fontWeight: 600 }}>
              附件：
              {affixList.map(item => (
                <a
                  key={item.fileId}
                  style={{ marginRight: 50 }}
                  onClick={e => {
                    e.preventDefault();
                    downloadFile({
                      fileId: item.fileId,
                      fileName: item.fileName,
                    });
                  }}
                >
                  {item.fileName}
                </a>
              ))}
            </div>
          ) : null}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default BasicProfile;
